<!-- 点位 -->

<template>
  <div />
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import UTIL from '@admin/views/Secure/Patrol/UTIL'

const { AMap } = window

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MapPoint',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixSelect('point', 'point_'), CORE.mixInfo('point', 'point_')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 是否全部就绪
     */
    readyAll() {
      return this.MAP.readyMap && this.param.tab === this.DICT.TAB[1][0] && !this.MAP.inTrack && this.point_readySelect
    },

    /**
     * 点位列表
     */
    pointList() {
      return this.point_select.filter((item) => item.lon && item.lat)
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听全部就绪
     */
    readyAll: {
      immediate: true,
      handler(ready) {
        ready && this.addToMap()
      },
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 添加到地图
     */
    addToMap() {
      const { map } = this.MAP
      const select = this.pointList

      // 清空
      map.clearMap()

      // 文本标记点
      select.forEach((item) => {
        const position = new AMap.LngLat(item.lon, item.lat)
        const text = `<div class="MajorTitle"><span class="MajorTitle-prop">${item.patrolName}</span></MajorTitle>`
        const marker = new AMap.Marker({ map, position, icon: UTIL.getImg('position.svg'), anchor: 'bottom-center' })
        const label = new AMap.Text({ map, position, text, anchor: 'top-center', visible: false, zIndex: 1000 })
        marker.on('mouseover', () => label.show())
        marker.on('mouseout', () => label.hide())
        marker.on('click', () => this.point_startInfo({ id: item.id }))
      })

      // 自适应缩放显示
      map.setFitView(null, null, [50, 0, 0, 100], 19)
    },
  },
}
</script>
